<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link href="css/bootstrap.min.css" rel="stylesheet">

	<style>
   
        .tag-area {
            position: fixed;
            bottom: 35px;
            left: 0px;
            width: 360px;
            list-style-type: none;
        }
        
        .tag-area li {
            margin-left: -40px;
            margin-top: 10px;
            margin-bottom: 10px;
            box-shadow: 3px 3px 3px;  
            width: 360px;
            height: 37px;
            padding: 0px 12px;
            font-size: 20px;
            font-weight: 900;            
        }
        
        .tag-area li span {
            line-height: 34px;
        }
        
	</style>
	
  </head>
  <body>
    <div class="container" style="margin-top: 150px; border: 2px dashed; border-radius: 6px;">
        <div class="row" style="margin-top: 30px; text-align: center;">
            <h1>按按钮 弹弹框</h1>
        </div>
        
        <div class="row" style="margin: 30px 0; text-align: center;">
            <div class="btn btn-success">成功</div>
            <div class="btn btn-primary">提示</div>
            <div class="btn btn-warning">警告</div>
            <div class="btn btn-danger">错误</div>
        </div>
        
        <ol id="msg-list" class="tag-area"></ol>
    </div>
 
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function() {
            var point = $('#msg-list');
            function removeItem(item) {
                item.animate({ width: '-=360' }, 300, 'linear', function() {
                    item.remove();
                });
            }                 
            function build(msg) {
                return {
                    item: $(msg),            
                    clock: function() {
                        var item = this.item;
                        var timer = setTimeout(function() {
                            removeItem(item);
                            clearTimeout(timer);
                        }, 3000);                          
                    },
                    bindMouse: function() {
                        var item = this.item;
                        item.mouseenter(function() { removeItem(item); });
                    },
                    active: function() {
                        this.clock();
                        this.bindMouse();
                        return this.item;
                    },
                };
            }
            function insert(msg) {
                var children = point.children(), len = children.length;
                children.each(function(i, e) { if(len - 8 - i > 0) removeItem($(e)); });
                point.append(build(msg).active());
            }
            $('.btn').click(function() {
                var it = $(this);
                var result = {
                    'btn-success': '<li style="background-color: #5cb85c"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp 成功的消息</li>',
                    'btn-primary': '<li style="background-color: #337ab7"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp 提示的消息</li>',
                    'btn-warning': '<li style="background-color: #f0ad4e"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp 警告的消息</li>',
                    'btn-danger' : '<li style="background-color: #d9534f"><span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp 错误的消息</li>',
                };
                var btns = ['btn-success', 'btn-primary', 'btn-warning', 'btn-danger'];
                var msg = result[btns.filter(function(e) { return it.hasClass(e); })];
                insert(msg);
            });
        });
    </script>
  </body>
</html>
